<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <template id="tmpl">
    <div>
      <h1>这是全局组件---{{msg}}</h1>
    </div>
  </template>

  <div id="app">
    <my-com1></my-com1>
    <h1>{{msg}}</h1>
  </div>


  <script>
    // 1. 组件可以有自己的data数据
    // 2. 组件的data必须是方法,方法内部必须返回一个对象
    // 3. template 中可以使用组件data中的数据
    Vue.component('myCom1', {
      template: '#tmpl',
      data: function(){
        return {
          msg: '这是组件中定义的数据'
        }
      }
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hhh'
      },
      methods: {

      }
    });

  </script>



</body>

</html>
